<template>
  <div>
    <el-form ref="form" label-position="left">
      <el-row :gutter="22">
        <el-col :span="24">
          <el-form-item
            label="需打印加工单:"
            prop="workArea"
            label-width="120px"
            >剪切(优化断料)</el-form-item
          >
        </el-col>
        <el-col :span="14">
          <div class="titleBox">
            <div class="name">加工单</div>
            <div class="option">
              <div class="optionCon">
                <el-checkbox-group class="groupSt" v-model="cover">
                  <el-checkbox label="包含封面" name="type"></el-checkbox>
                </el-checkbox-group>
                <el-radio-group v-model="edition">
                  <el-radio label="横版"></el-radio>
                  <el-radio label="竖版"></el-radio>
                </el-radio-group>
              </div>
              <el-button type="primary" size="mini">打印</el-button>
            </div>
          </div>
          <div>
            <i-frame src="https://www.baidu.com/" />
          </div>
        </el-col>
        <el-col :span="10">
          <div class="titleBox">
            <div class="name">料牌</div>
            <div class="option">
              <div class="optionCon">
                <el-radio-group v-model="materialCard">
                  <el-radio label="仅料牌"></el-radio>
                  <el-radio label="构件牌 + 料牌"></el-radio>
                  <el-radio label="仅构件牌"></el-radio>
                </el-radio-group>
              </div>
              <el-button type="primary" size="mini">打印</el-button>
            </div>
          </div>
          <div>
            <i-frame src="https://www.baidu.com/" />
          </div>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import iFrame from "@/components/iFrame/index"

export default {
  name: "",
  components: { iFrame },
  props: {},
  data() {
    return {
      cover: [],
      edition: "",
      materialCard: "",
      printData: {},
    };
  },
  filters: {},
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  beforeDestroy() {},
  methods: {
    reset() {
      this.cover = [];
      this.edition = "";
      this.materialCard = "";
    },
    deliveryData() {
      this.printData = {
        cover: this.cover,
        edition: this.edition,
        materialCard: this.materialCard,
      };
      this.$emit("printData", this.printData);
    },
  },
};
</script>

<style scoped lang="scss">
.titleBox {
  display: flex;
  align-items: center;
  padding: 0 10px;
  margin-bottom: 20px;
}
.name {
  width: 80px;
  font-size: 14px;
  font-weight: 700;
  color: #606266;
}
.option {
  display: flex;
  justify-content: space-between;
  width: 100%;
  // padding-right: 20px;
}
.optionCon {
  display: flex;
  align-items: center;
}
.groupSt {
  display: flex;
  margin-right: 40px;
}
</style>
